Day 5：Chrome Extension 實作篇 - manifest.json 權限設定實作

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 5：Chrome Extension 實作篇 - manifest.json 權限設定實作

🔧 從理論到實作

昨天我們深入學習了 Chrome Extension 權限系統的理論，今天我們要親手實作，為我們的輔大課表生成器配置適當的權限！

📋 實作目標

今天我們要完成：

1. 🛠️ 在現有的 manifest.json 中加入權限設定
2. 🔧 逐步測試基本權限配置
3. 📝 建立完整的權限配置檔案

🔨 步驟 1：回顧現有檔案

首先，讓我們檢查 Day 3 建立的基本 manifest.json：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.0",
  "description": "輔大課表生成器，一鍵產生當學期課表"
}

現在我們要為它加入權限設定！

🔐 步驟 2：實作權限配置

2.1 加入基本權限

讓我們從最基本的權限開始：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.0.1",
  "description": "輔大課表生成器，一鍵產生當學期課表",
  "permissions": [
    "activeTab"
  ]
}

實作步驟：

1. 開啟 manifest.json 檔案
2. 在 description 後面加上逗號
3. 新增 permissions 陣列
4. 加入 "activeTab" 權限
5. 將版本號更新為 1.0.1（表示新增功能）

2.2 測試基本權限

載入測試：

1. 打開 Chrome：chrome://extensions/
2. 點擊擴充功能的「重新載入」按鈕
   

驗證權限：

• ✅ 擴充功能應該正常載入
• ✅ 版本顯示為 1.0.1
• ✅ 沒有權限相關錯誤
  

2.3 逐步加入更多權限

現在讓我們加入更多權限：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.0.2",
  "description": "輔大課表生成器，一鍵產生當學期課表",
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ]
}

每次新增權限後都要測試：

1. 儲存檔案
2. 點擊擴充功能的「重新載入」按鈕
3. 檢查是否正常運作

2.4 加入主機權限

現在加入主機權限，讓擴充功能可以存取輔大網站：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.0.3",
  "description": "輔大課表生成器，一鍵產生當學期課表",
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "https://portal.fju.edu.tw/*"
  ]
}

2.5 完整權限配置

最終的完整權限配置：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.1.0",
  "description": "輔大課表生成器，一鍵產生當學期課表",
  "permissions": [
    "activeTab",
    "scripting",
    "storage",
    "downloads"
  ],
  "host_permissions": [
    "https://portal.fju.edu.tw/*",
    "http://estu.fju.edu.tw/*"
  ]
}

📂 專案結構檢查

完成所有步驟後，現在專案結構應該是：

📁 fju-schedule-extension/
└── 📄 manifest.json     ← 包含基本權限設定

如何實際測試和應用這些權限，包括建立測試腳本、除錯技巧，以及在實際開發中的最佳實踐。

🎯 下集預告：Day 6 - Chrome Extension 理論篇 - background.js 背景腳本解析